Bastro Personal Blogger Template” Documentation


Created: 23/04/2015
By: SEo Blogger Template
Email: seobloggert@gmail.com Website: www.SeoBloggerTemplates.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form. Thanks so much!


Table of Contents

  1. Installation
  2. Upload Logo
  3. Setting up the menu
  4. About the author and Social links
  5. Add searchbar on left pane
  6. Credits To

  1. Installation - top
  2. You Follow These Steps To Upload Your Blogger Template To Blogger Platform. First Login to your Blogger DashBoard by Using Your Google Username And Password.

    Then follow these steps:

    1. On Blogger Dashboard Click Template.

    2. Click on Customize Mobile Template on right side, now check the radio button for NO.

    3. Click Backup/Restore button (Top Right).

    4. Click on Choose File ( Browse..) button. Find the “template.xml” file location.

    5. Then Click Upload.


    To Edit Menu in this theme you can follow these steps:

    1. On Blogger Dashbord Click Template
    2. Click Edit HTML
    3. Scroll down and Find this Code :

      <div class='nav-collapse collapse'> 
       <ul class='nav' id='menu-primary'> 
       <li><a class='act' href='#' style='color: #fbcd12;'>Home</a></li> 
       <li><a href='#'>Theme Options</a></li> 
       <li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='#'>Pages<i class='icon-angle-down'/></a> 
      <ul class='dropdown-menu'> 
       <li><a href='#'>Full Width</a></li>
       <li><a href='#'>Right Sidebar</a></li> 
       <li><a href='#'>Left Sidebar</a></li> 
       <li><a href='#'>404 Page</a></li>  
      </ul> 
      </li> 
       <li><a href='#'>Download</a></li> 
       </ul> 
      </div>
    4. Change # with yours URL link and text with your text.

  3. featured Slider - top

    To Edit Menu in this theme you can follow these steps:

    1. On Blogger Dashbord Click layout
    2. Click Edit On Featured Slider Widget
    3. Add The following code

      featured

    4. After that go to your post and add label of that name "featured"

  4. About the author and Social links - top

    To Edit Menu in this theme you can follow these steps:

    1. On Blogger Dashbord Click layout
    2. Click Edit On Author Widget
    3. Add The following code

      <div class="about-me"> 
              <img src="http://3.bp.blogspot.com/-ojzRtpJZw6E/VQk3l9nnFrI/AAAAAAAABnU/skDzx4vL5xc/s1600/photo-1416339684178-3a239570f315.jpg" alt="About Bastro" /> 
      
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non leo vestibulum, condimentum elit non, venenatis eros.</p></div>
    4. Change Image Url with yours URL link and text with your text.

  5. Add Social to right panel - top


    If right panel doesn't have a searchbar then you can add it by yourself:
    Step 1: Goto Layout section, add a new gadget.
    Step 2: Select HTML/Javascript widget.
    Step 3: Paste the below code in the text area and leave the title blank. code:
    <ul class="social-icons social-rounded social-colored"> 
                                        <li> 
                            <a href="#" class="social-twitter" title="" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Twitter"> 
                                <i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i> 
                            </a> 
                        </li> 
                                                        <li> 
                            <a href="#" class="social-facebook" title="" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Facebook"> 
                                <i class="fa fa-facebook"></i> <i class="fa fa-facebook"></i> 
                            </a> 
                        </li> 
                                                        <li> 
                            <a href="#" class="social-google-plus" title="" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Google Plus"> 
                                <i class="fa fa-google-plus"></i><i class="fa fa-google-plus"></i> 
                            </a> 
                        </li> 
                                                        <li> 
                            <a href="#" class="social-linkedin" title="" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Linkedin"> 
                                <i class="fa fa-linkedin"></i><i class="fa fa-linkedin"></i> 
                            </a> 
                        </li> 
                                                        <li> 
                            <a href="#" class="social-dribbble" title="" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Dribbble"> 
                                <i class="fa fa-dribbble"></i><i class="fa fa-dribbble"></i> 
                            </a> 
                        </li> 
                                                         
                                                                                                                                </ul>

    Just Replace the # value with your links


  6. Add Searchbar to right panel - top
    If right pane doesn't have a searchbar then you can add it by yourself:
    Step 1: Goto Layout section, add a new gadget.
    Step 2: Select HTML/Javascript widget.
    Step 3: Paste the below code in the text area and leave the title blank. code:
    <form id="searchbox" method="get" action="/search"> 
    <input name="q" type="text" size="15" placeholder="Type here..." /> 
    <input id="button-submit" type="submit" value="Search" /> 
    </form>

  7. Change Footer Links - top


    Go to blogger dashboard and template section
    Step 1: Try to find by using jump to widget section right after save template option.
    Step 2: Select html1.


    <!-- Footer Starts--> 
     <footer id='footer-wrapper'> 
    <div class='container'> 
            <div id='footer'> 
                  <div class='col-lg-6 col-sm-6' id='foot-left'> 
                                        <img alt='' src='http://2.bp.blogspot.com/-RHjWIC9oDPg/VQ79c-Tay2I/AAAAAAAABqo/ce-dUEE6UI8/s1600/Bastro.PNG' title='logo-footer'/> 
                                    <p><span>@2014 Yours. All Right Reserved.</span></p>
                </div> 
    
    <div class='col-lg-6 col-sm-6' id='foot-right'> 
                    <a class='social-1' href='#'><i class='fa fa-facebook'/></a><a class='social-1' href='#'><i class='fa fa-twitter'/></a><a class='social-1' href='#'><i class='fa fa-linkedin'/></a><a class='social-1' href='#'><i class='fa fa-google-plus'/></a><a class='social-1' href='#'><i class='fa fa-pinterest'/></a><a class='social-1' href='#'><i class='fa fa-tumblr'/></a><a class='social-1' href='#'><i class='fa fa-instagram'/></a><a class='social-1' href='#'><i class='fa fa-rss'/></a>            </div> 
            </div> 
            <div class='clear'/> 
    
       </div> 
          </footer> 
    <!-- Footer Ends-->

    Change the Image url with your image url and for the social links change # value with your social links url

    Now you are good to go.

     

    Once again, thank you so much for purchasing this theme. As we said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist.

    SeoBloggerTemplate

    Go To Table of Contents